import logo from './logo.svg';
import './App.css';
import React,{Component,Suspense} from 'react'
import Counter from "./components/counter"
import Square from "./components/squares"
import {Routes,Route,Link} from "react-router-dom"
import DetailPage from "./page/detail.jsx";
const AboutPage = React.lazy(() => import("./page/about"))
class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            drawSwitch:false,
            nodes:new Array(9).fill(null),
            nextPlayerIsX:true,
            magicArr:[4,3,8,9,5,1,2,7,6],
            playX:[],
            playO:[],
            gameOver:false,
            winnerArr:[],
            winner:""
        }
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(){
        this.setState({
            drawSwitch:!this.state.drawSwitch
        })
    }
    justiceWinner(winner,notice,obj){
        winner.sort(function (a,b) {
            return a - b
        })
        for (let i = 0; i < winner.length; i++) {
            for (let x = 0; x < winner.length; x++) {
                for (let y = 0; y < winner.length; y++) {
                    if (winner[i] + winner[x] + winner[y] === 15 && i < x && x < y) {
                        //this.gameStatus = "Winner is: X!!!"
                        this.state.gameOver = true
                        this.state.winnerArr.push(this.state.magicArr.indexOf(winner[i]))
                        this.state.winnerArr.push(this.state.magicArr.indexOf(winner[x]))
                        this.state.winnerArr.push(this.state.magicArr.indexOf(winner[y]))
                        console.log(notice)
                        this.setState({
                            winner:obj
                        })
                    }else if((this.state.playO.length+this.state.playX.length===9)&&(!this.state.gameOver)){
                        //this.gameStatus = "啊这。。。。"
                        this.setState({
                            winner:"平局"
                        })
                    }
                }
            }
        }
    }
    handleClick(index){
        if(this.state.nodes[index]) return
        if (this.state.gameOver) return
        const copyNodes = [...this.state.nodes]
        copyNodes[index] = this.state.nextPlayerIsX ? "X" : "O"
        this.setState({
            nextPlayerIsX:!this.state.nextPlayerIsX,
            nodes:copyNodes
        },()=>{
            console.log(this.state.nodes) //为什么要写到回调里
        })
        console.log(copyNodes)
        if (this.state.nextPlayerIsX){
            this.state.playX.push(this.state.magicArr[index])
            console.log(this.state.playX,"xxxxxx")
        }else {
            this.state.playO.push(this.state.magicArr[index])
            console.log(this.state.playO,"ooooo")
        }
        //
        this.justiceWinner(this.state.playX,"X赢了","X")
        this.justiceWinner(this.state.playO,"O赢了","O")
    }
    handleReset(){
        this.setState({
            nodes:new Array(9).fill(null),
            nextPlayerIsX:true,
            magicArr:[4,3,8,9,5,1,2,7,6],
            playX:[],
            playO:[],
            gameOver:false,
            winnerArr:[],
            winner:""
        })
    }
  render() {
        const btnText = !this.state.drawSwitch ? "开启渲染" : "关闭渲染"
    return (
        <div className="App">
            {this.state.drawSwitch &&
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                {this.state.winner === "" && <h1>Next Player：{this.state.nextPlayerIsX? "X":"O"}</h1> }
                {this.state.winner === "X" && <h1 className="winner">Winner Is X</h1>}
                {this.state.winner === "O" && <h1 className="winner">Winner Is O</h1>}
                {this.state.winner === "平局" && <h1 className="noWinner">平局！！！</h1>}
                <div className="board">
                    {
                        this.state.nodes.map((item,index) =>
                            <Square key={index}
                                    handleClick = {(index) =>this.handleClick(index)}
                                    index={index}
                                    value={item}
                                    winnerArr={this.state.winnerArr}
                            />
                        )
                    }
                </div>
                <button className="reset" onClick={() => this.handleReset()}>Reset</button>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>}
          <Counter title={"第一个"}/>
          <Counter title={"second"}/>
          <Counter title={"第3个"}/>
          <Counter/>
          <nav>
              <Link to="/">详情</Link>
              |
              <Link to="/about">关于</Link>
          </nav>
          <Suspense fallback={<h2>Loading...!</h2>}>
              <Routes>
                  <Route path={"/"} element={<DetailPage/>}/>
                  <Route path={"/about"} element={<AboutPage/>}/>
              </Routes>
          </Suspense>
          <button className="draw" onClick={this.handleChange}>{btnText}</button>
        </div>
    )
  }
}
export default App;
